<template>
  <div class="castContainer" v-cloak>
    <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
    <div class="castMain">
      <!--teach_top-->
      <div class="teacherPhoto">
        <div class="teacherPhotoBox"><img v-lazy="teacherInfo.picture"></div>
        <div class="back"></div>
        <div class="teacherInfo">
          <span class="font14" v-text="teacherInfo.title"></span>
          <p class="font12">{{ teacherInfo.name }}   {{ teacherInfo.belongs }}</p>
        </div>
      </div>
      <!--teacher-profile-->
      <div class="teacherProfile">
        <span class="font13">专栏简介</span>
        <p class="font12">{{ teacherInfo.watchNum }} 人查看</p>
      </div>
      <div class="teacherBrief font12">
        来自马来西亚的胡渐彪，祖籍是广东开平，他的爷爷是当年下南洋的华人，从此便在南洋落地生根， 到今天差不多已有八十年时间，但胡渐彪的家族一直非常讲究传承语言和文化，在他小的时候，他的爷爷就 经常叮嘱他们必须要学会说自己的家乡话。
        担任新闻主播期间，他也兼职哗FM电台主持人。他在一家跨国公司担任产品部经理，也为马来西亚一些中文报章撰写文章。
      </div>
      <!--teacher_list-->
      <div class="articleList">
        <ul>
          <li v-for="(item, index) in items">
            <router-link :to="{ path: '/discover/cast/detail' }">
              <font>{{ index.length > 1 ? '0'+index+1 : index+1 }}</font>
              <p v-text="item.title"></p>
              <i v-if="item.already">已读</i>
              <span>{{ item.manyPeople }}人查看</span>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        teacherInfo: {
          picture: '',
          title: '中国美术往事',
          name: '陈丹青',
          belongs: '中央美院',
          watchNum: '4228'
        },
        items:[
          { title: '第一章', already: true, manyPeople: '4228' },
          { title: '第二章', already: false, manyPeople: '4228' },
          { title: '第一章', already: true, manyPeople: '4228' },
          { title: '第一章', already: false, manyPeople: '4228' }
        ]
      }
    }
  }
</script>

<style scoped lang="scss">
  .castContainer{
    width: 100%;
    background: #0d0d0d;
    .castMain{
      width: 100%;
      position: relative;
      z-index: 10;
      .teacherPhoto{
        width: 100%;
        position: relative;
        height: 2.65rem;
        overflow: hidden;
        background:#000;
        .teacherPhotoBox{
          width: 100%;
          height: 2.65rem;
          overflow: hidden;
          img{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
          }
        }
        .back{
          width: 0.18rem;
          height: 0.18rem;
          position: absolute;
          left: 0.12rem;
          top: 0.12rem;
          z-index: 100;
        }
        .back:after{
          content: '';
          width: 2px;
          height: 0.11rem;
          background: #fff;
          position: absolute;
          left: 0.06rem;
          top: 0;
          transform: rotate(45deg);
        }
        .back:before{
          content: '';
          width: 2px;
          height: 0.11rem;
          background: #fff;
          position: absolute;
          left: 0.06rem;
          bottom: 0;
          transform: rotate(-45deg);
        }
        .teacherInfo{
          width: 100%;
          padding: 0.16rem;
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 10;
          span{
            display: block;
            padding-bottom: 0.08rem;
          }
        }
      }
      .teacherProfile{
        width: 100%;
        padding: 0.18rem 0.12rem 0.12rem 0.12rem;
        position: relative;
        span{
          display: block;
          line-height: 0.13rem;
        }
        p{
          position: absolute;
          right: 0.12rem;
          top: 0.18rem;
          opacity:0.5;
          line-height: 0.1rem;
        }
      }
      .teacherBrief{
        width: 100%;
        padding: 0 0.12rem;
        line-height: 0.2rem;
        opacity:0.7;
      }
      .articleList{
        margin: 0.12rem;
        border-top: 1px solid rgba(255,255,255,0.2);
        padding-top: 0.17rem;
        li{
          line-height: 0.12rem;
          font-size: 0.12rem;
          position: relative;
          a{
            display: block;
            color: #fff;
            padding: 0.06rem 0;
            position: relative;
            font{
              float: left;
              margin-right: 0.13rem;
            }
            p{
              float: left;
              width: 1.08rem;
              text-overflow: ellipsis;
              opacity: 0.8;
            }
            i{
              float: left;
              font-style: normal;
              color: #ffcc23;
              font-size: 0.1rem;
            }
            span{
              opacity: 0.5;
              position: absolute;
              right: 0;
              top: 0.06rem;
            }
          }
          a:after{
            content: '';
            display: flex;
            width: 0;
            height: 0;
            visibility: hidden;
            clear: both;
          }
        }
      }
    }
  }
</style>
